<style scoped lang="less">
.relativeMusicBox {
  width: 250px;
  margin-left: 30px;
  &__title{
    font-weight: 500;
    font-size: 18px;
    color: #141B27;
  }

  &__list{

    &__item{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      margin-top: 10px;
      &__cover-box{
        flex-shrink: 0;
        margin-right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        overflow: hidden;
        &__image{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      &__info{
        flex: 1;
        &__title{
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          transition: all ease-in-out .3s;
          &:hover{ cursor: pointer; color: #c60505;}
          font-size: 12px;
          color: #3b3b3b;
          font-weight: 500;
          margin-bottom: 3px;
        }
        &__play-count{
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          &__icon{
            width: 12px;
            height: 12px;
            margin-right: 4px;
          }
          &__text{
            font-size: 12px;
            color: #999999;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="relativeMusicBox">
    <div class="relativeMusicBox__title">包含此歌曲的歌单</div>
    <div class="relativeMusicBox__list">
      <div class="relativeMusicBox__list__item"  v-for="(ele,index) of relativeMusicList">
        <div class="relativeMusicBox__list__item__cover-box">
          <img :src="ele.imageUrl" class="relativeMusicBox__list__item__cover-box__image">
        </div>
        <div class="relativeMusicBox__list__item__info">
          <div class="relativeMusicBox__list__item__info__title" @click="handleClickItem(ele)">{{ ele.title }}</div>
          <div class="relativeMusicBox__list__item__info__play-count">
            <img :src="playIcon" class="relativeMusicBox__list__item__info__play-count__icon">
            <div class="relativeMusicBox__list__item__info__play-count__text">{{ ele.playCount }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//@ts-ignore
import playIcon from '../../icon/play-plain.png'
import {computed, ref, watch} from "vue";
import netEasyMusicStore from '../../store'
import { AxiosService } from "@/core";
const axios = new AxiosService('netEasyMusic')
import {formatNumber, getDomPosition, setTimer} from "@/helper";
const musicId = computed(() => netEasyMusicStore.$state.playing?.id)
const commentsBox = ref(null)
// 评论列表
let relativeMusicListApi = ref([])
const relativeMusicList = computed(() => relativeMusicListApi.value?.map((ele:any) => ({
  ...ele,
  imageUrl: ele?.coverImgUrl, // 封面
  title: ele?.name ,// 标题
  playCount: formatNumber(ele.playCount), // 播放量
})))
const showDetail = computed(() => netEasyMusicStore.$state.showDetail)
// 逻辑
/** 监听id状态变化 */
watch(musicId, value => {
  getComments()
})
/** 监听页面加载变化 */
watch(showDetail, value => {
  if(value && !relativeMusicListApi.value.length) getComments()
})
// 请求
/** 获取相似歌曲列表 */
const getComments = () => {
  return axios.get({
    api:'/simi/playlist',
    params: {id:musicId.value},
    success: ({playlists}) => relativeMusicListApi.value = playlists ?? []
  })
}

// 交互
const handleClickItem = (event:any) => {
  const { id } = event
  axios.get({
    api:'/playlist/track/all',
    params:{id},
    success: ({songs}) => netEasyMusicStore.setPlayList(songs.map((ele:any) => ele.id),true)
  })
}
</script>

